<template>
    <el-container>
        <el-menu :default-active="activeIndex" class="menu-container" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1"> <a href="#" target="_blank">星解广州商学院心理健康与咨询中心</a></el-menu-item>
            <div class="right-aligned">
                <el-menu-item index="2" disabled><i class="el-icon-bell"></i> 消息中心（把我做成铃铛图标）</el-menu-item>
                <el-menu-item index="avatar" @click="handleAvatarClick">
                    <img src="../images/weixinavatar.jpg" alt="Avatar" class="avatar">
                    姓名
                </el-menu-item>
                <el-submenu index="4">
                    <template slot="title">把我做成隐藏式导航栏</template>
                    <el-menu-item index="2-1">个人信息</el-menu-item>
                    <el-menu-item index="2-2">预约记录</el-menu-item>
                    <el-menu-item index="2-3">预约入口</el-menu-item>
                    <el-submenu index="2-4">
                        <template slot="title">账号管理</template>
                        <el-menu-item index="2-4-1">选项1</el-menu-item>
                        <el-menu-item index="2-4-2">选项2</el-menu-item>
                        <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </div>
        </el-menu>
        <div class="line"></div>

        <el-main class="main">
            <!-- main区域的上三行布局一个action的垂直标签来实现其中的元素换行 -->
            <div class="action">
                <div class="user-actions">
                    <span><img src="../images/weixinavatar.jpg" alt="Avatar" class="avatar"></span>
                    <span>
                        <div>姓名</div>
                        <div>账号</div>
                    </span>

                    <span><a href="#">创建值班</a></span>
                    <span><a href="#">我的咨询记录</a></span>
                    <span><a href="#">工作备忘录</a></span>
                    <span><router-link to="XingJie">总览</router-link></span>
                    <span><router-link to="Duty">值班管理</router-link></span>
              
                    
                    <span><a href="#">来访者心理档案库</a></span>
                </div>

                <div class="action-links">
                    <span><a href="#">我的来访者</a></span>
                    <span><a href="#">本周还未完成的咨询</a></span>
                    <span><a href="#">距离开始咨询还有</a></span>
                    <span><a href="#">已完成的咨询</a></span>
                </div>
            </div>
            <!-- 下面依旧使用默认的div元素会占据其父元素的全部宽度，即横向排列（因为下面要用表格） -->
            <div class="tables-container">
                <el-table :data="visitorTableData" stripe style="width: 100%" class="visitor-table">
                    <el-table-column prop="name" label="姓名" width="80"></el-table-column>
                    <el-table-column prop="grade" label="年级" width="80"></el-table-column>
                    <el-table-column prop="situation" label="心理情况"></el-table-column>
                </el-table>

                <el-table :data="analysisTableData" stripe style="width: 100%" class="analysis-table">
                    <el-table-column prop="date" label="日期" width="80"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="80"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                </el-table>

                <el-calendar  class="calender-table">
                    <template v-slot:dateCell="{ /* date, */ data }">
                        <p :class="data.isSelected ? 'is-selected' : ''">
                            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
                        </p>
                    </template>
                </el-calendar>

            </div>
        </el-main>



        <el-footer>
            Footer</el-footer>
    </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      visitorTableData: [
        {
          name: '王小虎',
          grade: '一年级',
          situation: '良好'
        }
      ],
      analysisTableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      calendarTableData: [
        // 如果需要在日历中显示数据，请在这里定义
      ],
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleAvatarClick() {
      // Handle avatar click here
    }
  }
}
</script>

<style scoped>
/* 导航栏盒子布局 */
.menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* 导航栏右侧区盒子布局 */
.right-aligned {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    /* 这样可以保证在空间不足时，这些元素会缩放 */
}

/* 头像盒子样式 */
.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

/* 消息图标样式 */
.el-icon-bell {
    margin-right: 5px;
}

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - 125px);
    /* 占据视口高度减去 header 和 footer 的高度 */
    position: relative;
    overflow: auto;
    /* 如果内容超出则显示滚动条 */
    background-image: url('../images/屏幕截图.png');
    background-size: cover;
    background-position: center;
}

/* 操作功能区布局 */
.action {
    display: flex;
    height: 100px;
    flex-direction: column;
    align-items: center;
}

.user-actions {
    display: flex;
    /* 使子元素横向排列 */
    flex-wrap: wrap;
    gap: 10px;
    /* 在子元素之间添加间距 */
    justify-content: center;
    /* 水平居中 */
    padding-top: 10px;
    /* 添加上边距以与顶部保持一定距离 */
    margin-bottom: 10px;
    /* 添加下边距以与 .action-links 分隔开 */
}

.action-links {
    display: flex;
    /* 使子元素横向排列 */
    flex-wrap: wrap;
    gap: 10px;
    /* 在子元素之间添加间距 */
    justify-content: center;
    /* 水平居中 */
}

/* 表格区布局  */
.tables-container {
    display: flex;
    /* 横向排列 */
    gap: 10px;
    /* 表格之间的间距 */
    margin-top: 10px;
    /* 顶部边距 */
}

/* 左侧表格样式 */
.visitor-table {
    flex: 1;
    /* 占用的空间比例 */
    max-width: 20%;
    /* 最大宽度限制 */
}

.analysis-table {
    flex: 1;
    /* 占用的空间比例 */
    max-width: 35%;
    /* 最大宽度限制 */
}
.calendar-table{
    flex: 1;
    /* 占用的空间比例 */
    max-width: 10%;
    /* 最大宽度限制 */
    font-size: 0.8em; /* 减小字体大小 */
}

.is-selected {
    color: #1989FA;
}
</style>
